<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <script type="text/javascript" src="../../js/commonCss.js"></script>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css" />
</head>
<body>
<form class="form-inline definewidth m20 " role="form">
    <div class="form-group w200 mb10">
        <div class="input-group">
            <div class="input-group-addon">开始时间</div>
            <input type="text" class="form-control" value="" id="datetimepicker">
        </div>
    </div>
    <div class="form-group w200 mb10">
        <div class="input-group">
            <div class="input-group-addon">结束时间</div>
            <input type="text" class="form-control" value="" id="datetimepicker2">
        </div>
    </div>
    <div class="form-group w200 mb10">
        <div class="input-group">
            <div class="input-group-addon">项目编号</div>
            <input type="text" name="project_code" class="form-control" id="project_code" placeholder="">
        </div>
    </div>
    <div class="form-group w200 mb10">
        <div class="input-group">
            <div class="input-group-addon">项目名称</div>
            <input type="text" name="project_name" class="form-control" id="project_name" placeholder="">
        </div>
    </div>
    <div class="form-group w200 mb10">
        <div class="input-group">
            <div class="input-group-addon">项目状态</div>
            <select name="project_status" class="form-control" id="project_status" >
            </select>
        </div>
    </div>

    <div class="form-group mb10">
        <button type="button" class="btn btn-primary" id="search">查询</button>
        <a class="btn btn-success page-action" href="#" role="button" data-href="ProjectInfo/info.html?act=add" title="新增项目" data-id="info">新增</a>
    </div>
</form>
<div class="definewidth">
    <button type="button" class="btn btn-danger" id="delect">删除</button>
    <button type="button" class="btn btn-default" id="refleshList">刷新列表</button>
    <table id="table" class="table table-bordered table-hover definewidth m10"></table>
</div>

<script src="../../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="../../libs/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script type="text/javascript" src="../../js/formatTime.js"></script>
<script type="text/javascript" src="../../scripts/ProjectInfo/list.js"></script>
<script type="text/javascript" src="../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<script type="text/javascript">
    document.onkeydown=function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==13){ // enter 键
            document.getElementById('search').click();
            return false;
        }
    };
    $(function () {
        $('#datetimepicker').datepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose:true
        });
        $('#datetimepicker2').datepicker({
            language: 'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose:true
        });
        $.ajax({
            type: "POST",
            url: ctx + "/parameter/queryByParameterType",
            data:{
                parameterType: 'projectState'
            },
            success: function(data){
                if(data.code == 200){
                    SetOption('#project_status', data.list)
                }
            }
        });
        initTable();
        $('#search,#refleshList').click(function(){
            $('#table').bootstrapTable('refresh', {url: ctx + '/project/query'});
        });
        $("#delect").click(function () {
            var selRow = $('#table').bootstrapTable('getSelections')
            var selId = selRow.map(function (item) {
                return item.projectId
            })
            $.ajax({
                type: "POST",
                url: ctx + "/project/delete",
                traditional:true,
                data:{
                    projectIds:selId
                },
                success: function(data){
                    $('#table').bootstrapTable('refresh', {url: ctx + '/project/query'});
                }
            })
        })

    });
    var SetOption = function(id, param){
        var html = '';
        html +='<option value="">请选择</option>';
        for (var i =0;i<param.length;i++){
            html +='<option value="'+ param[i].paramId +'">'+ param[i].paramName +'</option>';
        }
        $(id).append(html);
    }

    function  initTable() {
        $('#table').bootstrapTable({
            url: ctx + '/project/query', //这个接口需要处理bootstrap table传递的固定参数
            method:'post',
            dataType: "json",
            cache: false,   //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            contentType:"application/x-www-form-urlencoded; charset=UTF-8",   //post请求,content type默认设置为 text/plain,在服务端直接通过 @RequestParam参数映射是获取不到的。
            striped: true,      //是否显示行间隔色
            pagination: true,     //是否显示分页（*）
            sortable: false,      //是否启用排序
            sortOrder: "asc",     //排序方式
            pageNumber:1,      //初始化加载第一页，默认第一页
            pageSize: 10,      //每页的记录行数（*）
            pageList: [10, 25, 50, 100 ],  //可供选择的每页的行数（*）
            queryParamsType:'',  //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
            //设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
            queryParams : queryParams,    //前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
            sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
            responseHandler:function(res){
                //远程数据加载之前,处理程序响应数据格式,对象包含的参数: 我们可以对返回的数据格式进行处理
                //在ajax后我们可以在这里进行一些事件的处理
                return res.data;
            },
            strictSearch: true,
            clickToSelect: true,    //是否启用点击选中行
            searchOnEnterKey: true,
            columns: [{
                checkbox: true
            },{
                field: 'projectId',
                title: 'id',
                visible: false
            }, {
                field: 'establishDate',
                title: '立项日期',
                formatter:function (value) {
                    var unix = Number(value)
                    return $.myTime.UnixToDate(unix)
                }
            },{
                field: 'projectCode',
                title: '项目编号'
            }, {
                field: 'projectName',
                title: '项目名称'
            },{
                field: 'projectType',
                title: '项目类型'
            }, {
                field: 'projectManager',
                title: '项目经理'
            }, {
                field: 'saler',
                title: '销售负责人'
            },{
                field: 'totalContractAmount',
                title: '合同总金额'
            }, {
                field: 'totalNonTaxAmount',
                title: '合同总金额(不含税)'
            },{
                field: 'price',
                title: '操作',
                formatter: function (value, row, index) {
                    var plan = '<a class="page-action" href="#" role="button" data-href="ProjectInfo/plan.html?id='+row.projectId+'" title="收款计划" data-id="info">收款计划</a>&nbsp;&nbsp;'
                    var show = '<a class="page-action" href="#" role="button" data-href="ProjectInfo/info.html?act=show&id='+row.projectId+'" title="查看详情" data-id="info">查看详情</a>&nbsp;&nbsp;'
                    var edit = '<a class="page-action" href="#" role="button" data-href="ProjectInfo/info.html?act=show&id='+row.projectId+'" title="编辑" data-id="info">编辑</a>'
                    return plan+show + edit;
                }
            }]
        });
    }

    function queryParams(params){
        return {
            pageNumber : params.pageNumber,
            pageSize : params.pageSize,
            startTime : $("#startDate").val(),
            endTime : $("#endDate").val(),
            projectCode : $("#project_code").val(),
            projectName : $("#project_name").val(),
            projectStatus : $("#project_status").val()
        }
    }
</script>
</body>
</html>